Use unity and variety in mockups 在 Mockup 中保持統一又有變化
運用統一性（Unity）提升設計連貫性
統一性是指設計中所有元素之間的協作程度，它能夠讓使用者感受到頁面的清晰、整潔與一致性，幫助他們更順暢地完成任務。
統一性的三個關鍵方面：
1 元素對齊
案例：在 YouTube Music App 中，儘管“影片”是矩形、“收藏”是圓形，它們在頁面上佔據的空間一致，形成統一視覺節奏。
2 元素形狀的一致性
案例：播放列表的封面圖均為大小一致的方形。這種統一的比例和尺度讓整個介面顯得有序、易於瀏覽。
3 文字樣式的連貫性
案例：YouTube Music 中的標題和描述文字均使用相同字型、顏色和對齊方式，哪怕內容長短不同，視覺一致性依然得以維持。
如何在你的 mockup 中應用統一性？
- 回顧你的設計目標，每個介面元素是否都在為這個目標服務？
- 檢查字型、顏色、按鈕樣式、圖片比例是否一致？
- 使用設計系統或元件庫來確保一致性。
運用多樣性（Variety）增加視覺吸引力
多樣性是為了打破單調、吸引注意力，保持使用者對產品的興趣。即便是在功能性強、視覺較“平”的產品中，適當的變化也能提升使用者體驗。
多樣性的應用案例：
1 元素大小的變化
案例：Google Photos 應用中，部分照片保持原始比例（長方形），穿插在規則網格（方形）中，增強視覺節奏感，讓使用者更願意瀏覽。
2 色彩、形狀、圖示等變化
在頁面設計中穿插不同風格的圖示、略微不同的按鈕造型，甚至是背景紋理，都可以讓使用者眼前一亮。
如何在你的 mockup 中應用多樣性？
- 找出介面中過於重複、平淡的區域，試著新增不同尺寸或樣式的圖形元素。
- 保持風格統一的前提下，引入適當變化：如特定 CTA（行動呼籲）按鈕使用亮色或不同形狀，吸引點選。
- 運用色彩、層次、視覺權重等變化方式來增加趣味性。
統一與多樣的平衡：關鍵在於目的明確
| 統一性 | 多樣性 |
|---|---|
| 增強秩序、清晰度 | 增添趣味、吸引注意 |
| 用於保持整體一致 | 用於強調重點或打破單調 |
| 適用於導航、排版、佈局 | 適用於圖片展示、CTA按鈕、卡片元件等 |
🌟 實戰小建議：
- 一個頁面的統一性構建好之後，再區域性加入多樣性，效果更佳。
- 設計風格可參考 Google、Spotify、Apple 等成熟 app，他們通常使用統一的色系 + 區域性強調色。